<template>
	<view class="container">
		<weiNoData :visible="isNoData"></weiNoData>
		<!--内容部分-->
		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="detail" class="tui-msg" v-for="(item, index) in dataList" :key="index" 
			@tap="toMemberDetail(item.memberId,item.userName)">
				<view class="tui-msg-box">
					<image :src="$cdn.appAvatar+item.headPic" class="tui-msg-pic" mode="widthFix"></image>
					<view class="tui-msg-item">
						<view class="tui-msg-name">{{ item.userName }}</view>
						<view class="tui-msg-content">{{ item.cityName+''+item.postJob }}</view>
					</view>
				</view>
				<view class="tui-msg-right">
					<view class="tui-msg-time">{{ item.age }}岁</view>
					<tui-badge :type="item.sex==1 ? 'danger':'green'" class="tui-badge">{{item.sex==1 ? '男':'女' }}</tui-badge>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<!--内容部分-->

		<tui-tips ref="toast" position="center"></tui-tips>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiListView from '@/components/list-view/list-view';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiBadge from '@/components/badge/badge';
import tuiTips from '@/components/tips/tips';
import weiNoData from '@/components/wei-nodata/wei-nodata.vue';
export default {
	components: {
		tuiListView,
		tuiListCell,
		tuiIcon,
		tuiTag,
		tuiLoadmore,
		tuiNomore,
		tuiTips,
		weiNoData,
		tuiBadge
	},
	data() {
		return {
			$cdn: this.$cdn,
			// 分页必备参数
			isNoData: false,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,

			dataList: [],
			actId: ''
		};
	},
	onLoad(e) {
		if (e.actId) {
			this.actId = e.actId;
			this.yetJoinActMember(1, false, { actIdQuery: this.actId });
		}
	},
	methods: {
		// 是否展示刷新成功提示
		isShowRefresh(isRefresh) {
			if (isRefresh) {
				let options = {
					msg: '刷新成功',
					duration: 2000,
					type: 'translucent'
				};
				this.$refs.toast.showTips(options);
				// 关闭下拉刷新loading
				uni.stopPullDownRefresh();
			}
		},
		// 获取已报名列表
		yetJoinActMember(pageIndex, isRefresh, postData) {
			this.tui
				.request(
					this.$api.yetJoinActMember + '?pageNum=' + pageIndex + '&pageSize=' + this.$api.pageSize,
					postData,
					'POST',
					false,
					pageIndex == 1 && !isRefresh ? false : true
				)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						// 如无数据
						if (res.data.total == 0) {
							this.isNoData = true;
							// 加return 让后面nomore不展示【没有更多了】
							return;
						}

						if (pageIndex == 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = this.dataList.concat(res.data.rows);
							// 隐藏加载更多loading
							this.loadding = false;
						}

						// 如已是最后一条，则提示无加载更多
						if (this.dataList.length >= res.data.total) {
							this.pullUpOn = false;
							this.loadding = false;
						}
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		toMemberDetail(memberId,userName) {
			uni.navigateTo({
				url: '../member/member-detail?memberId='+memberId+ '&userName=' + userName
			});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// 下拉重置页码为第一页
		this.pageIndex = 1;
		this.yetJoinActMember(this.pageIndex, true, {actIdQuery: this.actId});
		// 允许下拉和加载更多
		this.pullUpOn = true;
		this.loadding = false;
		// 拉新数据前，先隐藏
		this.isNoData = false;
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		// 显示加载更多loading
		this.loadding = true;
		this.yetJoinActMember(++this.pageIndex, false, {actIdQuery: this.actId});
	}
};
</script>

<style>
.container {
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-list-view {
	padding-top: 0upx !important;
}

.tui-list-cell-name {
	padding-left: 20upx;
	vertical-align: middle;
	line-height: 30upx;
}

.tui-list::after {
	left: 94upx !important;
}

.tui-right {
	margin-left: auto;
	margin-right: 34upx;
	font-size: 26upx;
	line-height: 1;
	color: #999;
}

.logo {
	height: 40upx;
	width: 40upx;
}

.tui-flex {
	display: flex;
	align-items: center;
}

.tui-msg-box {
	display: flex;
	align-items: center;
}

.tui-msg-pic {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	display: block;
	margin-right: 24upx;
}

.tui-msg-item {
	max-width: 500upx;
	min-height: 80upx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tui-msg-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34upx;
	line-height: 1;
	color: #262b3a;
}

.tui-msg-content {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 26upx;
	line-height: 1;
	color: #9397a4;
}

.tui-msg-right {
	max-width: 120upx;
	height: 88upx;
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.tui-msg-right.tui-right-dot {
	height: 76upx;
	padding-bottom: 10upx;
}

.tui-msg-time {
	width: 100%;
	font-size: 24upx;
	line-height: 24upx;
	color: #9397a4;
}

.tui-badge {
	width: auto;
}

.tui-msg::after {
	left: 154upx !important;
}
</style>
